<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>theme 主题切换</title>
    <link rel="stylesheet" type="text/css" href="./css/theme.css">
    <!-- <link rel="stylesheet" type="text/css" href="./css/theme.scss"></link> -->
    </link>
</head>
<style>
    div {
        background-color: var(--bg1);
        width: 500px;
        height: 500px;
    }

    h1 {
        color: var(--text-color);
    }
</style>

<body>
    <div>
        <h1>1111</h1>
        <button onclick="change()">切换主题</button>
        <button onclick="follow()">跟随系统</button>
    </div>

</body>
<script>

    var match = matchMedia('(prefers-color-scheme: dark)')

    function change() {
        document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? "" : "dark"
    }

    function follow() {
        document.documentElement.dataset.theme = match.matches ? "dark" : ""
    }

    match.addEventListener('change', () => {
        document.documentElement.dataset.theme = match.matches ? "dark" : ""
    })

</script>

</html>